<!-- 审批弹窗 -->
<template>
  <a-modal
    v-model:visible="vdata.visible"
    :maskClosable="false"
    title="活动审批"
    width="30%"
    @close="onClose"
  >
    <!-- 增加一个温馨提示来个icon用黄色的字体 -->
    <a-alert
      type="warning"
      show-icon
      message="请在审批前仔细阅读活动信息，确保信息的准确性。"
      style="margin-bottom: 20px;"
    >
      <template #description>
        <span 
          style="color: #1890ff; cursor: pointer;"
          @click="handleActivityInfoClick"
        >
          点击查看
        </span>
      </template>
    </a-alert>

  
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      :rules="vdata.rules"
      layout="vertical"
      :label-col="{ span: 24}"
      :wrapper-col-col="{ span: 24 }"
    >
      <a-form-item name="state" label="审批意见">
        <a-radio-group v-model:value="vdata.saveObject.state">
          <a-radio :value="1">通过</a-radio>
          <a-radio :value="2">拒绝</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-col v-if="vdata.saveObject.state === 1 && vdata.saveObject.isReceipt" :span="24">
        <a-form-item label="回执函" name="fileList">
          <template #label>
            <span style="margin-right: 20px;width: 100%;">文件上传</span>
          </template>
          <a-upload-dragger
            :fileList="vdata.saveObject['fileList']"
            :action="vdata['action']"
            :data="vdata.formParams"
            :maxCount="1"
            accept=".zip"
            name="file"
            :beforeUpload="beforeUpload"
            @change="uploadChange"
          >
            <p class="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p class="ant-upload-text">拖动到此处上传，或<a>点击上传</a></p>
            <p class="ant-upload-hint">
              <b style="color: #ff4d4f">每次只能上传一个文件，</b>限制文件格式为zip。
            </p>
          </a-upload-dragger>
        </a-form-item>
      </a-col>
      <a-form-item v-if="vdata.saveObject.state === 2" label="审批原因" name="remark">
        <a-textarea
          v-model:value="vdata.saveObject.remark"
          :placeholder="'审批原因'"
          :rows="4"
          style="margin-top: 10px"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="onClose">
        <close-outlined />取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />审批
      </a-button>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { $submitAudit } from '@/api/activityManage/activityExamine/index' 
import { $getUploadFormParams } from '@/api/components/GzUpload/index'
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const formRef = ref()

const props = defineProps(['callbackFunc'])
const emits = defineEmits(['switchApplyPage'])

const vdata: any = reactive({
  visible: false, // 弹层是否显示

  // 文件上传
  action: '', // 上传地址
  formParams: {}, // 表单参数
  fileList: [], // 文件列表 用于上传失败时 进行清空

  //更新的信息
  saveObject: {}, // 提交数据
  examineRecords: [], // 审批流数据

  // button 进度条
  butLoading: false,
  rules: {
    state: [{ required: true, message: '请选择审批结果', trigger: ['blur','change'] }],
    remark: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
    fileList: [{ required: true, message: '请上传回传设置函', trigger: 'change' }]
  },
})

/**
 * 文件上传
 */
 function beforeUpload(file) {
  vdata.saveObject.fileList = [file]
  // 校验文件大小 不大于20MB
  const isLt20M = file.size / 1024 / 1024 < 20
  if (!isLt20M) {
    vdata.saveObject.fileList = []
    $infoBox.message.warn('文件大小不能超过20MB！')
    return false
  }
  // 校验文件格式
  const isExcel = /\.(zip)$/.test(file.name)
  if (!isExcel) {
    vdata.saveObject.fileList = []
    $infoBox.message.warn('文件格式必须为zip！')
    return false
  }
  return $getUploadFormParams(file, 'upload').then((res) => {
    vdata.action = res.formActionUrl // action
    vdata.formParams = res.formParams //表单组件
    vdata.saveObject.ossFileUrl = res.ossFileUrl
  })
}
function uploadChange(info) {
  if (info.file.status === 'error') {
    // 上传异常
    vdata.saveObject.fileList = []
    $infoBox.message.error('上传异常,请联系系统管理员')
  }

  if (info.file.status === 'done') {
    $infoBox.message.success('上传成功')
  }
}

/**
 * 提交
 */
function handleOkFunc() {
  formRef.value.validateFields().then(async () => {
    const { remark, state, ossFileUrl, activityId, auditRecordsId } = vdata.saveObject
    const payload = {
      remark: state === 1 ? '通过' : remark,
      state,
      ossFileUrl,
      activityId,
      auditRecordsId,
    }
    await $submitAudit(payload)
    $infoBox.message.success('审批成功！')
    props.callbackFunc()
    vdata.visible = false
  }).catch((err) => {
    console.log(err)
  })
}
const recordCopy = ref({}) as any
// 弹层打开事件
function show(record) {
  const { activityId, auditRecordsId, couponList, isReceipt } = record
  recordCopy.value = JSON.parse(JSON.stringify(record)) // 记录原始数据，避免直接修改传入的record对象
  // 数据重置
  vdata.saveObject = {
    activityId,
    auditRecordsId,
    isReceipt,
    couponList: couponList?JSON.parse(JSON.stringify(couponList)):[],
  }
  // 清除表单校验
  if(formRef.value !== undefined){
    formRef.value.clearValidate()
  }
  vdata.visible = true
}
function onClose() {
  vdata.visible = false
}

function handleActivityInfoClick() {
  vdata.visible = false
  // 触发父组件的查看活动详情方法
  // props.callbackFunc({ action: 'viewActivity', params: { activityId: vdata.saveObject.activityId } })
  emits('switchApplyPage', { page: 'activityCreateEntry', params: { isAdd: false, activityDetail: recordCopy.value, isDetail:true } })
}


defineExpose({ show })
</script>

<style lang="less" scoped>
:deep(.ant-upload-list-item-name){
  flex-shrink: 1 !important;
}
.ant-table-wrapper{
  margin: 0;
}
</style>
